<template>
	<div>
		<el-upload class="upload-demo" :action="useOss ? ossUploadUrl : minioUploadUrl" :data="useOss ? dataObj : null"
			list-type="text" :file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove"
			:on-success="handleUploadSuccess" :on-preview="handlePreview" :limit="maxCount" :on-exceed="handleExceed">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'MultiUploadOss',
		props: {
			//图片属性数组
			// value: Array,
			//最大上传图片数量
			maxCount: {
				type: Number,
				default: 20
			},
			img: Array
		},
		data() {
			return {
				dataObj: {
					policy: '',
					signature: '',
					key: '',
					ossaccessKeyId: '',
					dir: '',
					host: ''
				},
				dialogVisible: false,
				dialogImageUrl: null,
				useOss: true, //使用oss->true;使用MinIO->false
				ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
				minioUploadUrl: 'http://localhost:8080/minio/upload',
				fileList: []
			};
		},
		watch: {
			img() {
				if (this.img) {
					const shuzu = [];
					this.img.forEach(a => {
						shuzu.push({
							name: a.substring(a.lastIndexOf('_')),
							url: a
						});
					});
					this.fileList = shuzu;
				} else {
					this.fileList = [];
				}
			}
		},
		computed: {
			// fileList() {
			//     let fileList = [];
			//     if (this.value) {
			//         console.log('ss', this.value);
			//         for (let i = 0; i < this.value.length; i++) {
			//             fileList.push({ url: this.value[i] });
			//         }
			//     }
			//     return fileList;
			// }
		},
		methods: {
			clear() {
				this.fileList = [];
			},
			emitInput(fileList) {
				let value = [];
				for (let i = 0; i < fileList.length; i++) {
					value.push(fileList[i].url);
				}
				console.log('value', value);
				this.$emit('input', value);
			},
			handleRemove(file, fileList) {
				this.emitInput(fileList);
			},
			handlePreview(file) {
				this.dialogVisible = true;
				this.dialogImageUrl = file.url;
			},
			beforeUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 1024;
				if (!isLt10M) {
					this.$message.error('上传大小不能超过 1G!');
					return false;
				}
				let _self = this;
				var index = file.name.lastIndexOf(".");
				//获取后缀
				var ext = file.name.substr(index);
				let filename = new Date().getTime() + ext.replace(',', '')
				if (!this.useOss) {
					//不使用oss不需要获取策略
					return true;
				}
				return new Promise((resolve, reject) => {
					this.$http
						.get(this.$host + '/admin/oss/policy', {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						})
						.then(function(response) {
							if (response.data.code == 1000) {
								_self.dataObj.policy = response.data.data.policy;
								_self.dataObj.signature = response.data.data.signature;
								_self.dataObj.ossaccessKeyId = response.data.data.accessKeyId;
								_self.dataObj.key = response.data.data.dir + '/' + filename;
								_self.dataObj.dir = response.data.data.dir;
								_self.dataObj.host = response.data.data.host;
								_self.ossUploadUrl = response.data.data.host;
								_self.showProgress = true;
								// _self.dataObj.callback = response.data.callback;
								resolve(true);
							}
						});
				});
			},
			handleUploadSuccess(res, file) {
				let url = this.dataObj.host + '/' + this.dataObj.key;
				if (!this.useOss) {
					//不使用oss直接获取图片路径
					url = res.data.url;
				}
				this.fileList.push({
					name: file.name,
					url: url
				});
				this.emitInput(this.fileList);
			},
			handleExceed(files, fileList) {
				this.$message({
					message: '最多只能上传' + this.maxCount + '张图片',
					type: 'warning',
					duration: 1000
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.upload-demo {
		display: flex;

		.el-upload__tip {
			height: 16px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 26px;
			margin-left: 20px;
		}
	}

	/deep/.el-upload-list {
		display: flex;
	}

	/deep/.el-upload-list__item {
		margin-left: 10px;
		background: #f1f1f1;
		width: 10vw;
	}

	/deep/.el-upload-list__item:first-child {
		margin-top: 6px;
	}

	/deep/.el-upload--text {
		width: 120px;
		height: 40px;
	}
</style>
